function documentElementTest() {
    var html = document.documentElement; //取得对<html>的引用
    var body = document.body; //取得对<body>的引用
    var doctype = document.doctype; //取得对<!DOCTYPE>的引用
    var originalTitle = document.title;//取得文档标题

    //取得完整的URL
    var url = document.URL;
    //取得域名
    var domain = document.domain;
    //取得来源页面的URL
    var referrer = document.referrer;

    console.log("html:" + html);
    console.log("body:" + body);
    console.log("doctype:" + doctype);
    console.log("originalTitle:" + originalTitle);
    console.log("url:" + url);
    console.log("domain:" + domain);
    console.log("referrer:" + referrer);


    console.log("document.childNodes[0]:" + document.childNodes[0]);
    console.log("document.firstChild:" + document.firstChild);
    alert(html === document.childNodes[0]); //true
    alert(html === document.firstChild); //true
}

function searchElementTest() {
    var div = document.getElementById("myDiv"); //取得<div>元素的引用
    console.log("document.getElementById(\"myDiv\"):" + div);
    if (div == null) {
        div = document.getElementById("mydiv"); //无效的ID（在IE7 及更早版本中可以）
        console.log("document.getElementById(\"mydiv\"):" + div);
    }
    console.log("div.id:" + div.id); //"myDiv""
    console.log("div.className:" + div.className); //"bd"
    console.log("div.title:" + div.title); //"Body text"
    console.log("div.lang:" + div.lang); //"en"
    console.log("div.dir:" + div.dir); //"ltr"

    console.log(div.getAttribute("id")); //"myDiv"
    console.log(div.getAttribute("class")); //"bd"
    console.log(div.getAttribute("title")); //"Body text"
    console.log(div.getAttribute("lang")); //"en"
    console.log(div.getAttribute("dir")); //"ltr"
    console.log(div.getAttribute("my_special_attribute"));

    console.log(div.attributes["id"].nodeValue);
    console.log("-----------------------------------");
    console.log(outputAttributes2(div));
}

function outputAttributes(element) {
    var pairs = [],
        attrName,
        attrValue,
        i,
        len;
    for (i = 0, len = element.attributes.length; i < len; i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName + "=\"" + attrValue + "\"");
    }
    return pairs.join(" ");
}

function outputAttributes2(element) {
    var pairs = [],
        attrName,
        attrValue,
        i,
        len;
    for (i = 0, len = element.attributes.length; i < len; i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if (element.attributes[i].specified) {
            pairs.push(attrName + "=\"" + attrValue + "\"");
        }
    }
    return pairs.join(" ");
}

function createElementTest() {
    var div = document.createElement("div");
    //IE可以以下面的方式使用
    // if (client.browser.ie && client.browser.ie <= 7) {
    //     //创建一个带name 特性的iframe 元素
    //     var iframe = document.createElement("<iframe name=\"myframe\"></iframe>");
    //     //创建input 元素
    //     var input = document.createElement("<input type=\"checkbox\">");
    //     //创建button 元素
    //     var button = document.createElement("<button type=\"reset\"></button>");
    //     //创建单选按钮
    //     var radio1 = document.createElement("<input type=\"radio\" name=\"choice\" value=\"1\">");
    //     var radio2 = document.createElement("<input type=\"radio\" name=\"choice\" value=\"2\">");
    // }
    div.id = "myNewDiv";
    div.className = "box";
    document.body.appendChild(div);
}

function childNodesTest() {
    var element = document.getElementById("myList");
    for (var i = 0, len = element.childNodes.length; i < len; i++) {
        if (element.childNodes[i].nodeType === 1) {
            //执行某些操作
            console.log(element.childNodes[i].textContent);
        }
    }

    var ul = document.getElementById("myList");
    var items = ul.getElementsByTagName("li");
    console.log(items);
}

function textNodeTest() {
    var div = document.getElementsByName("div");
    // var textNode = div.childNodes[3]; //或者div.childNodes[0]
    // textNode.nodeValue = "Some other message";
    // console.log(textNode);

    var element = document.createElement("div");
    element.className = "message";
    var textNode = document.createTextNode("Hello world!");
    element.appendChild(textNode);
    document.body.appendChild(element);
    // element.firstChild.data=123;
    alert(element.firstChild.data);
}

function commentTest() {
    var div = document.getElementById("commentDiv");
    var comment = div.firstChild;
    alert(comment.data); //"A comment"
    console.log("nodeType:" + comment.nodeType);//8
    console.log("nodeName:" + comment.nodeName);//#comment
    console.log("nodeValue:" + comment.nodeValue);
    console.log("parentNode:" + comment.parentNode);
}

function documentFragmentTest() {
    var fragment = document.createDocumentFragment();
    console.log("nodeType:" + fragment.nodeType);//11
    console.log("nodeName:" + fragment.nodeName);//#document-fragment
    console.log("nodeValue:" + fragment.nodeValue);//null
    console.log("parentNode:" + fragment.parentNode);//null
    var ul = document.getElementById("myUl");
    var li = null;
    for (var i = 0; i < 3; i++) {
        li = document.createElement("li");
        li.appendChild(document.createTextNode("Item " + (i + 1)));
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
    attrTest(ul);
}

function attrTest(element) {
    //我们并不建议直接访问特性节点。实际上，使用getAttribute()、setAttribute()
    //和removeAttribute()方法远比操作特性节点更为方便。
    var attr = document.createAttribute("align");
    attr.value = "right";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value); //"right"
    console.log(element.getAttributeNode("align").value); //"right"
    console.log(element.getAttribute("align")); //"right"
}

//动态脚本------------------------------------------
function loadScriptTest() {
    loadScriptString("function sayHi(){alert('hi');}");
    sayHi();
}


function loadScript(url) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

//loadScriptString("function sayHi(){alert('hi');}");
function loadScriptString(code) {
    // 以这种方式加载的代码会在全局作用域中执行，而且当脚本执行后将立即可用。实际上，这样执行
    // 代码与在全局作用域中把相同的字符串传递给eval()是一样的。
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex) {
        script.text = code;
    }
    document.body.appendChild(script);
}

//动态样式------------------------------------------
function loadStyles(url) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

function loadStyleString(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode(css));
    } catch (ex) {
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

function loadStyleTest() {
    loadStyleString("body{background-color:red}");
}

//操作表格------------------------------------------
function createTable() {
    //创建table
    var table = document.createElement("table");
    table.border = 1;
    table.width = "100%";
    //创建tbody
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);
    //创建第一行
    var row1 = document.createElement("tr");
    tbody.appendChild(row1);
    var cell1_1 = document.createElement("td");
    cell1_1.appendChild(document.createTextNode("Cell 1,1"));
    row1.appendChild(cell1_1);
    var cell2_1 = document.createElement("td");
    cell2_1.appendChild(document.createTextNode("Cell 2,1"));
    row1.appendChild(cell2_1);
    //创建第二行
    var row2 = document.createElement("tr");
    tbody.appendChild(row2);
    var cell1_2 = document.createElement("td");
    cell1_2.appendChild(document.createTextNode("Cell 1,2"));
    row2.appendChild(cell1_2);
    var cell2_2 = document.createElement("td");
    cell2_2.appendChild(document.createTextNode("Cell 2,2"));
    row2.appendChild(cell2_2);
    //将表格添加到文档主体中
    document.body.appendChild(table);
    //<table>元素添加的属性和方法:
    //  caption：保存着对<caption>元素（如果有）的指针。
    //  tBodies：是一个<tbody>元素的HTMLCollection。
    //  tFoot：保存着对<tfoot>元素（如果有）的指针。
    //  tHead：保存着对<thead>元素（如果有）的指针。
    //  rows：是一个表格中所有行的HTMLCollection。
    //  createTHead()：创建<thead>元素，将其放到表格中，返回引用。
    //  createTFoot()：创建<tfoot>元素，将其放到表格中，返回引用。
    //  createCaption()：创建<caption>元素，将其放到表格中，返回引用。
    //  deleteTHead()：删除<thead>元素。
    //  deleteTFoot()：删除<tfoot>元素。
    //  deleteCaption()：删除<caption>元素。
    //  deleteRow(pos)：删除指定位置的行。
    //  insertRow(pos)：向rows 集合中的指定位置插入一行。
    // 为<tbody>元素添加的属性和方法如下。
    //  rows：保存着<tbody>元素中行的HTMLCollection。
    //  deleteRow(pos)：删除指定位置的行。
    //  insertRow(pos)：向rows 集合中的指定位置插入一行，返回对新插入行的引用。

    //<tr>元素添加的属性和方法:
    //  cells：保存着<tr>元素中单元格的HTMLCollection。
    //  deleteCell(pos)：删除指定位置的单元格。
    //  insertCell(pos)：向cells 集合中的指定位置插入一个单元格，返回对新插入单元格的引用。
}

function createTable2() {
    //创建table
    var table = document.createElement("table");
    table.border = 1;
    table.width = "100%";
    //创建tbody
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);
    //创建第一行
    tbody.insertRow(0);
    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
    //创建第二行
    tbody.insertRow(1);
    tbody.rows[1].insertCell(0);
    tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
    tbody.rows[1].insertCell(1);
    tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
    //将表格添加到文档主体中
    document.body.appendChild(table);
}

function createTableTest() {
    createTable();
    createTable2();
}

function nodeList() {
    // 应该尽量减少访问NodeList 的次数。因为每次访问NodeList，都会运行一次基于文
    // 档的查询。所以，可以考虑将从NodeList 中取得的值缓存起来。
    var divs = document.getElementsByTagName("div"),
        i,
        len,
        div;
    for (i = 0, len = divs.length; i < len; i++) {
        div = document.createElement("div");
        document.body.appendChild(div);
    }
}